<template>
  <div class="input-box">
    <label class="simple-input-content" for="inputCode">
      <span class="highlight">{{inputCode.slice(0,1)}}</span>
      <span :class="inputCode.length > 1?'highlight':''">{{inputCode.slice(1,2)}}</span>
      <span :class="inputCode.length > 2?'highlight':''">{{inputCode.slice(2,3)}}</span>
      <span :class="inputCode.length > 3?'highlight':''">{{inputCode.slice(3,4)}}</span>
      <span :class="inputCode.length > 4?'highlight':''">{{inputCode.slice(4,5)}}</span>
      <span :class="inputCode.length > 5?'highlight':''">{{inputCode.slice(5,6)}}</span>
    </label>
    <input id="inputCode" v-model.trim="inputCode" type="number" placeholder="请输入六位数字验证码">
  </div>
</template>

<script>
export default {
  name: 'VerifyCode',
  data () {
    return {
      inputCode: '',
      isShowInput: false
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.input-box {
    height: 45px;
    width: 100%;
    position: relative;
    input {
      position: absolute;
      z-index: -1;
      top: 10px;
      left: 20px;
    }
    // 六个span时的样式
    .simple-input-content {
      display: flex;
      justify-content: space-around;
      span {
        vertical-align: middle;
        display: inline-block;
        background-color: #eee;
        height: 44px;
        line-height: 44px;
        text-align: center;
        width: 44px;
        border-radius: 5px;
      }
    }
    /* 去掉input[type=number]浏览器默认的icon显示 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button { // chrome
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }
    input{ // 火狐
        -moz-appearance:textfield;
    }
  }
</style>